<template>
    <div class="settings-container">
      <a-page-header title="账户设置" sub-title="管理您的账户偏好设置" class="settings-header"/>
      
      <div class="settings-layout">
        <!-- 账户安全设置 -->
        <div class="settings-section">
          <div class="content-header">
            <h3>账户安全</h3>
            <p class="content-description">管理您的账户安全信息，包括密码、手机号和邮箱等</p>
          </div>
          
          <a-list item-layout="horizontal" class="settings-list">
            <a-list-item>
              <a-list-item-meta title="密码">
                <template #description>
                  <span>上次修改时间: <DateFormatter value="2024-03-15" /></span>
                </template>
              </a-list-item-meta>
              <template #extra>
                <a-button type="link" @click="showChangePasswordModal">修改</a-button>
              </template>
            </a-list-item>
            
            <a-list-item>
              <a-list-item-meta title="绑定邮箱">
                <template #description>
                  <span>{{ userInfo.email }}</span>
                </template>
              </a-list-item-meta>
              <template #extra>
                <a-button type="link" @click="showChangeEmailModal">修改</a-button>
              </template>
            </a-list-item>
            
            <a-list-item>
              <a-list-item-meta title="两步验证">
                <template #description>
                  <span>{{ twoFactorEnabled ? '已开启' : '未开启' }}</span>
                </template>
              </a-list-item-meta>
              <template #extra>
                <a-switch v-model:checked="twoFactorEnabled" @change="toggleTwoFactor"/>
              </template>
            </a-list-item>
          </a-list>
        </div>
        
        <!-- 通知偏好设置 -->
        <div class="settings-section">
          <div class="content-header">
            <h3>通知偏好</h3>
            <p class="content-description">自定义您想要接收的通知类型和方式</p>
          </div>
          
          <a-form :model="notificationSettings" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="系统通知">
              <a-switch v-model:checked="notificationSettings.system"/>
            </a-form-item>
            
            <a-form-item label="订单更新通知">
              <a-switch v-model:checked="notificationSettings.order"/>
            </a-form-item>
            
            <a-form-item label="促销活动通知">
              <a-switch v-model:checked="notificationSettings.promotion"/>
            </a-form-item>
            
            <a-form-item label="通知方式">
              <a-checkbox-group v-model:value="notificationSettings.channels">
                <a-checkbox value="app">应用内通知</a-checkbox>
                <a-checkbox value="email">邮件通知</a-checkbox>
                <a-checkbox value="sms">短信通知</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" @click="saveNotificationSettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </div>
        
        <!-- 隐私设置 -->
        <div class="settings-section">
          <div class="content-header">
            <h3>隐私设置</h3>
            <p class="content-description">管理您的隐私选项和账户安全</p>
          </div>
          
          <a-form :model="privacySettings" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="个人资料可见性">
              <a-radio-group v-model:value="privacySettings.profileVisibility">
                <a-radio value="public">公开</a-radio>
                <a-radio value="friends">仅好友可见</a-radio>
                <a-radio value="private">仅自己可见</a-radio>
              </a-radio-group>
            </a-form-item>
            
            <a-form-item label="允许使用数据改进服务">
              <a-switch v-model:checked="privacySettings.dataUsage"/>
            </a-form-item>
            
            <a-form-item label="允许个性化推荐">
              <a-switch v-model:checked="privacySettings.personalized"/>
            </a-form-item>
            
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" @click="savePrivacySettings">保存设置</a-button>
            </a-form-item>
          </a-form>
          
          <div class="privacy-actions">
            <a-button danger @click="showDeleteAccountModal">删除账户</a-button>
            <p class="deletion-notice">注意：账户删除后将无法恢复，所有数据将被永久删除。</p>
          </div>
        </div>
      </div>
      
      <!-- 修改密码模态框 -->
      <a-modal
        v-model:open="passwordModalVisible"
        title="Change Password"
        @ok="updatePassword"
        :confirmLoading="passwordLoading"
      >
        <a-form :model="passwordForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="当前密码">
            <a-input-password v-model:value="passwordForm.currentPassword"/>
          </a-form-item>
          <a-form-item label="新密码">
            <a-input-password v-model:value="passwordForm.newPassword"/>
          </a-form-item>
          <a-form-item label="确认新密码">
            <a-input-password v-model:value="passwordForm.confirmPassword"/>
          </a-form-item>
        </a-form>
      </a-modal>
      
      <!-- 修改邮箱模态框 -->
      <a-modal
        v-model:open="emailModalVisible"
        title="Change Email"
        @ok="updateEmail"
        :confirmLoading="emailLoading"
      >
        <a-form :model="emailForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="当前邮箱">
            <a-input disabled value="u***@example.com"/>
          </a-form-item>
          <a-form-item label="新邮箱">
            <a-input v-model:value="emailForm.newEmail" placeholder="请输入新邮箱"/>
          </a-form-item>
          <a-form-item label="验证码">
            <a-row :gutter="8">
              <a-col :span="16">
                <a-input v-model:value="emailForm.verificationCode" placeholder="请输入验证码"/>
              </a-col>
              <a-col :span="8">
                <a-button :disabled="emailForm.countdown > 0" @click="sendEmailVerificationCode">
                  {{ emailForm.countdown > 0 ? `${emailForm.countdown}秒后重试` : '获取验证码' }}
                </a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </a-modal>
      
      <!-- 删除账户确认模态框 -->
      <a-modal
        v-model:open="deleteAccountModalVisible"
        title="Delete Account"
        @ok="confirmDeleteAccount"
        :confirmLoading="deleteAccountLoading"
        okText="确认删除"
        cancelText="取消"
        okType="danger"
      >
        <p>您确定要删除账户吗？此操作不可逆，所有数据将被永久删除。</p>
        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="输入密码确认">
            <a-input-password v-model:value="deleteAccountPassword" placeholder="请输入您的密码以确认"/>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, h } from 'vue';
  import { message } from 'ant-design-vue';
  import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import DateFormatter from '@/components/common/DateFormatter.vue';
  
  // 用户信息
  const userInfo = reactive({
    email: 'u***@example.com'
  });
  
  // 两步验证开关
  const twoFactorEnabled = ref(false);
  
  // 密码修改模态框
  const passwordModalVisible = ref(false);
  const passwordForm = reactive({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  });
  const passwordLoading = ref(false);
  
  // 邮箱修改模态框
  const emailModalVisible = ref(false);
  const emailForm = reactive({
    newEmail: '',
    verificationCode: '',
    countdown: 0
  });
  const emailLoading = ref(false);
  
  // 通知设置
  const notificationSettings = reactive({
    system: true,
    order: true,
    promotion: false,
    channels: ['app', 'email']
  });
  
  // 隐私设置
  const privacySettings = reactive({
    profileVisibility: 'friends',
    dataUsage: true,
    personalized: true
  });
  
  // 删除账户模态框
  const deleteAccountModalVisible = ref(false);
  const deleteAccountPassword = ref('');
  const deleteAccountLoading = ref(false);
  
  // 显示修改密码模态框
  const showChangePasswordModal = () => {
    passwordModalVisible.value = true;
  };
  
  // 修改密码
  const updatePassword = () => {
    if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
      message.error('请填写完整的表单');
      return;
    }
    
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      message.error('两次输入的密码不一致');
      return;
    }
    
    passwordLoading.value = true;
    
    // 模拟API调用
    setTimeout(() => {
      passwordLoading.value = false;
      message.success('密码修改成功');
      passwordModalVisible.value = false;
      
      // 重置表单
      passwordForm.currentPassword = '';
      passwordForm.newPassword = '';
      passwordForm.confirmPassword = '';
    }, 1000);
  };
  
  // 显示修改邮箱模态框
  const showChangeEmailModal = () => {
    emailModalVisible.value = true;
  };
  
  // 更新邮箱
  const updateEmail = () => {
    if (!emailForm.newEmail || !emailForm.verificationCode) {
      message.error('请填写完整的表单');
      return;
    }
    
    emailLoading.value = true;
    
    // 模拟API调用
    setTimeout(() => {
      emailLoading.value = false;
      message.success('邮箱修改成功');
      emailModalVisible.value = false;
      
      // 更新显示的邮箱
      const emailParts = emailForm.newEmail.split('@');
      userInfo.email = emailParts[0].charAt(0) + '***@' + emailParts[1];
      
      // 重置表单
      emailForm.newEmail = '';
      emailForm.verificationCode = '';
    }, 1000);
  };
  
  // 发送验证码（邮箱）
  const sendEmailVerificationCode = () => {
    if (!emailForm.newEmail) {
      message.error('请输入新邮箱');
      return;
    }
    
    message.success('验证码已发送到您的邮箱');
    
    // 开始倒计时
    emailForm.countdown = 60;
    const timer = setInterval(() => {
      emailForm.countdown--;
      if (emailForm.countdown <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  };
  
  // 切换两步验证
  const toggleTwoFactor = (checked) => {
    if (checked) {
      message.success('两步验证已开启');
    } else {
      message.success('两步验证已关闭');
    }
  };
  
  // 保存通知设置
  const saveNotificationSettings = () => {
    message.success('通知设置已保存');
  };
  
  // 保存隐私设置
  const savePrivacySettings = () => {
    message.success('隐私设置已保存');
  };
  
  // 显示删除账户模态框
  const showDeleteAccountModal = () => {
    deleteAccountModalVisible.value = true;
  };
  
  // 确认删除账户
  const confirmDeleteAccount = () => {
    if (!deleteAccountPassword.value) {
      message.error('请输入密码以确认删除账户');
      return;
    }
    
    deleteAccountLoading.value = true;
    
    // 模拟API调用
    setTimeout(() => {
      deleteAccountLoading.value = false;
      message.success('账户已删除');
      // 关闭模态框
      deleteAccountModalVisible.value = false;
      // 重置密码字段
      deleteAccountPassword.value = '';
    }, 1000);
  };
  </script>
  
  <style scoped>
  .settings-container {
    padding: 32px;
    background: #f5f5f5;
  }
  
  .settings-header {
    margin-bottom: 32px;
    padding: 0;
    
    :deep(.ant-page-header-heading-title) {
      color: #262626;
      font-size: 28px;
      font-weight: 600;
    }
    
    :deep(.ant-page-header-heading-sub-title) {
      color: #595959;
      font-size: 16px;
      margin-top: 4px;
    }
  }
  
  .settings-layout {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  
  .settings-section {
    padding: 40px;
    background: #fff;
    
    & + .settings-section {
      border-top: 1px solid #f0f0f0;
    }
  }
  
  .content-header {
    margin-bottom: 40px;
    
    h3 {
      color: #262626;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .content-description {
      color: #8c8c8c;
      font-size: 14px;
      line-height: 1.5;
    }
  }
  
  /* 列表样式 */
  .settings-list {
    :deep(.ant-list-item) {
      padding: 24px 0;
      
      &:hover {
        background: #fafafa;
      }
      
      &:first-child {
        padding-top: 0;
      }
    }
    
    :deep(.ant-list-item-meta) {
      align-items: center;
      
      &:where(.ant-list-item-meta-title) {
        color: #262626;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
      }
      
      &:where(.ant-list-item-meta-description) {
        color: #8c8c8c;
        font-size: 14px;
      }
    }
  }
  
  /* 表单样式 */
  :deep(.ant-form) {
    .ant-form-item {
      margin-bottom: 32px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .ant-form-item-label > label {
      color: #262626;
      font-size: 16px;
      font-weight: 500;
    }
    
    .ant-switch {
      background-color: rgba(0, 0, 0, 0.25);
      
      &:where(.ant-switch-checked) {
        background-color: #262626;
      }
    }
    
    .ant-radio-wrapper {
      color: #595959;
      font-size: 14px;
      margin-right: 32px;
      
      &:hover {
        color: #262626;
      }
      
      .ant-radio {
        .ant-radio-inner {
          width: 18px;
          height: 18px;
          border-color: #d9d9d9;
          
          &::after {
            background-color: #262626;
            width: 10px;
            height: 10px;
          }
        }
        
        &:where(.ant-radio-checked) .ant-radio-inner {
          border-color: #262626;
        }
      }
      
      &:where(.ant-radio-wrapper-checked) {
        color: #262626;
      }
    }
    
    .ant-checkbox-wrapper {
      color: #595959;
      font-size: 14px;
      margin-right: 32px;
      
      &:hover {
        color: #262626;
      }
      
      .ant-checkbox {
        &:where(.ant-checkbox-checked) .ant-checkbox-inner {
          background-color: #262626;
          border-color: #262626;
        }
        
        .ant-checkbox-inner {
          border-color: #d9d9d9;
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  
  /* 隐私操作区域样式 */
  .privacy-actions {
    margin-top: 40px;
    padding: 24px;
    background: #fafafa;
    border-radius: 8px;
    
    .deletion-notice {
      margin-top: 16px;
      color: #ff4d4f;
      font-size: 14px;
      line-height: 1.6;
    }
  }
  
  /* 模态框样式 */
  :deep(.ant-modal) {
    .ant-modal-content {
      border-radius: 12px;
      overflow: hidden;
    }
    
    .ant-modal-header {
      border-bottom: 1px solid #f0f0f0;
      padding: 20px 24px;
      
      .ant-modal-title {
        color: #262626;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .ant-modal-close {
      color: #595959;
      
      &:hover {
        color: #262626;
      }
    }
    
    .ant-modal-body {
      padding: 24px;
    }
    
    .ant-modal-footer {
      border-top: 1px solid #f0f0f0;
      padding: 16px 24px;
      
      .ant-btn {
        border-radius: 6px;
        height: 38px;
        
        &:where(.ant-btn-default) {
          border-color: #d9d9d9;
          
          &:hover {
            color: #262626;
            border-color: #262626;
          }
        }
        
        &:where(.ant-btn-primary) {
          background: #262626;
          border-color: #262626;
          
          &:hover {
            background: #434343;
            border-color: #434343;
          }
          
          &:active {
            background: #1f1f1f;
            border-color: #1f1f1f;
          }
        }
        
        &:where(.ant-btn-dangerous) {
          color: #ff4d4f;
          border-color: #ff4d4f;
          
          &:hover {
            color: #ff7875;
            border-color: #ff7875;
            background: #fff1f0;
          }
        }
      }
    }
  }
  
  /* 输入框样式 */
  :deep(.ant-input),
  :deep(.ant-input-password) {
    border-radius: 6px;
    border-color: #d9d9d9;
    
    &:hover {
      border-color: #262626;
    }
    
    &:focus {
      border-color: #262626;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }
  }
  </style>